enhanced-forms.mdx

import { A } from 'solid-start'; import { HttpStatusCode } from 'solid-start/server'; import { Description, PreactOrReact, Qwik, Solid, Title } from '~/components';

<Title>Enhanced forms</Title> Modular Forms makes it easy to create progressively enhanced forms that work in the browser without JavaScript.

Enhanced forms

This page is currently exclusively for the Qwik library of Modular Forms. Once we have implemented the actions for SolidJS, we will update this page.

Modular Forms makes it easy to create progressively enhanced forms that work in the browser without JavaScript. And best of all, you don't have to compromise on functionality. Input validation works as usual and the first field with an error will still be focused automatically.

Server-side validation

There are a few small things to keep in mind during development. First, you need to pass a schema to formAction$ with valiForm$ or zodForm$ so that we can also validate the submitted data on the server. Since the validation in this case is server-side, it cannot be manipulated by the user.

Special data types

Second, depending on the complexity of your form, you may need to suplement information that would be lost during submission without JavaScript. We use this information to transform the submitted data so that it fits your schema and can be validated.

You have to supplement the paths to arrays, booleans, dates, files and numbers. Below you will find a code example of our special form from the playground.

export const useFormAction = formAction$<SpecialForm>(
  (values) => {
    // Runs on server
  },
  {
    validate: valiForm$(SpecialSchema),
    arrays: ['checkbox.array', 'file.list', 'select.array'],
    booleans: ['checkbox.boolean'],
    files: ['file.item', 'file.list'],
    numbers: ['number', 'range'],
  }
);

Send files to server

If your form also processes files, as in the example above, you must also set the encType property in the Form component so that the browser transfers the files to the server as Blob.

<Form encType="multipart/form-data">…</Form>

Restore date objects

Also you need to set the encType property when working with native date objects. This is because when JavaScript is enabled in the browser, we send the data to the server as JSON and do not suplement it there. By setting the encType property, you tell Modular Forms to submit the data as FormData and to suplement it server-side. In this process we then convert it back to a native date object.

Complex code examples

Not every website needs progressively enhanced forms. However, if yours does, you can find more code examples in our <a href={${import.meta.env.VITE_GITHUB_PLAYGROUNDS_URL}/qwik/src/routes/actions} target="_blank" rel="noreferrer">GitHub repository and StackBlitz playground.

This page is exclusively for the Qwik library of Modular Forms.